import React, { Component } from 'react'
import './index.css'
import { SearchBar } from 'antd-mobile'
import { LeftOutline } from 'antd-mobile-icons'
import mz from '../../assets/img/mz.png';
import add from '../../assets/img/add.png';
import vip from '../../assets/img/vip.png';
import axios from 'axios'
import withRightNav from '../../components/hoc/withRightNav';
class List extends Component {
    constructor() {
        super();
        this.state = {
            list: [],
            searchTxt: ""
        }
    }
    changeTxt = (val) => {
        console.log(val);
    }
    componentDidMount() {
        console.log(this.props);
        let searchKey = this.props.match.params.searchstr;
        axios.post('https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/commoditySearch', { "memberKey": "", "searchKey": searchKey, "isWholeSale": 0, "channelId": "C06022632001", "page": 1 }).then(res => {
            console.log(res);
            this.setState({
                list: res.data.data.templateList
            })
        })
    }
    goBack = () => {
        this.props.history.go(-1);
    }
    render() {
        let searchTxt = this.props.match.params.searchstr;
        let { list } = this.state;
        return (
            <div className='list'>
                <div className='list-topbar'><LeftOutline className='return' onClick={this.goBack} /><SearchBar placeholder='请输入内容' value={searchTxt} onChange={this.changeTxt} /> </div>
                <div className='list-items'>
                    {list.map((item, index) => <div className='good-item' key={index}>
                        <div className='good-img'><img src={item.listImages} alt=""></img></div>
                        <div className='tip'>
                            <div className='tip-img'><img src={mz} alt=""></img></div>
                        </div>
                        <div className='title'>{item.name}</div>
                        <div className='guige'>{item.displayName}</div>
                        <div className='price-wrap'>
                            <div className='left'>
                                <span style={{ fontWeight: 700, color: '#fd4b63', fontSize: '13px' }}>￥</span>
                                <span style={{ fontWeight: 700, color: '#fd4b63', fontSize: '18px' }}>{item.origPrice}</span><br />
                                <span style={{ color: '#111', fontSize: '12px', marginTop: '10px', display: 'inline-block' }}>￥{item.supplyPrice}</span>
                                <div className='vip'><img src={vip} alt=""></img></div>
                            </div>
                            <div className='right'><img src={add} alt=""></img></div>
                        </div>
                    </div>)}
                </div>
            </div>
        )
    }
}
export default withRightNav(List);